<template>
  <view class="myself">
    <view class="user_info_wrap">
      <view v-if="userinfo.avatarUrl" class="user_img_wrap">
        <image class="user_bg" :src="userinfo.avatarUrl"></image>
        <view class="user_info">
          <image class="user_icon" :src="userinfo.avatarUrl"></image>
          <view class="user_name">{{userinfo.nickName}}</view>
        </view>
      </view>
      <view v-else class="user_btn">
        <navigator url="/pages/auth/auth">登录</navigator>
      </view>
    </view>
    <view class="user_content">
      <view class="user_main">
        <!-- 历史足迹 -->
        <view class="history_wrap">
          <view class="navigator">
            <view class="his_num">0</view>
            <view class="his_name">收藏的店铺</view>
          </view>
          <view @click="toList(collectList,'collect')" class="navigator">
            <view class="his_num">{{collectList.length}}</view>
            <view class="his_name">收藏的商品</view>
          </view>
          <!-- <view class="navigator">
            <view class="his_num">0</view>
            <view class="his_name">关注的商品</view>
          </view> -->
          <view class="navigator" @click="toList(historyList,'history')">
            <view class="his_num">{{historyList.length}}</view>
            <view class="his_name">我的足迹</view>
          </view>
        </view>
        <!-- 我的订单 -->
        <view class="orders_wrap">
          <view class="orders_title">我的订单</view>
          <view class="order_content">
            <navigator url="/pages/order/order?type=1">
              <view class="iconfont icon-ding_dan"></view>
              <view class="order_name">全部订单</view>
            </navigator>
            <navigator url="/pages/order/order?type=2">
              <view class="iconfont icon-daifukuan"></view>
              <view class="order_name">待付款</view>
            </navigator>
            <navigator url="/pages/order/order?type=3">
              <view class="iconfont icon-daishouhuo1"></view>
              <view class="order_name">待收货</view>
            </navigator>
            <navigator>
              <view class="iconfont icon-refund"></view>
              <view class="order_name">退款/退货</view>
            </navigator>
          </view>
        </view>
        <!-- 收货地址管理 -->
        <navigator class="address_wrap"
          url="/pages/address/address?path=myself">
          收货地址管理
        </navigator>
        <!-- 应用信息相关 -->
        <view class="app_info_wrap">
          <view class="app_info_item app_info_contact">
            <text>联系客服</text>
            <text>400-618-4000</text>
          </view>
          <navigator url="/pages/feedback/index" class="app_info_item">意见反馈
          </navigator>
          <view class="app_info_item">关于我们</view>
        </view>
        <!-- 推荐 -->
        <view class="recommend_wrap">
          把应用推荐给其他人
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getStorage
  } from "../../../api/Storage.js"
  export default {
    data() {
      return {
        userinfo: {},
        // 被收藏的商品的数量
        collectList: [],
        historyList: []
      };
    },
    methods: {
      toList(receiveList, type) {
        let list = []
        receiveList.forEach(v => {
          let obj = {
            goods_id: v.goods_id,
            goods_small_logo: v.goods_small_logo,
            goods_name: v.goods_name,
            goods_price: v.goods_price
          }
          list.push(obj)
        })

        uni.navigateTo({
          url: "/pages/list/list?list=" + encodeURIComponent(JSON.stringify(
            list)) + "&type=" + type
        })
        // let collectList = JSON.stringify(
        //   this.collectList)
        // collectList = collectList.replace(/%/g, '%25')
        // uni.navigateTo({
        //   url: "/pages/list/list?list=" + encodeURIComponent(collectList)
        // })
      }
    },
    onShow() {
      const userinfo = getStorage("userinfo") || {};
      const collect = getStorage("collect") || [];
      const historyList = getStorage("historyList") || [];
      this.userinfo = userinfo
      this.collectList = collect
      this.historyList = historyList
    }
  };
</script>

<style lang="scss">
  .myself {
    .user_info_wrap {
      height: 45vh;
      overflow: hidden;
      position: relative;

      .user_img_wrap {
        position: relative;

        .user_bg {
          height: 50vh;
          // 高斯模糊
          filter: blur(10upx);
        }

        .user_info {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 20%;
          text-align: center;

          .user_icon {
            width: 150upx;
            height: 150upx;
            border-radius: 50%;
          }

          .user_name {
            color: #fff;
            margin-top: 40upx;
            // font-size: 40upx;
          }
        }
      }

      .user_btn {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 40%;
        border: 1upx solid greenyellow;
        color: greenyellow;
        font-size: 38upx;
        padding: 30upx;
        border-radius: 10upx;
      }
    }



    .user_content {
      position: relative;

      .user_main {
        padding-bottom: 100upx;
        color: #666;
        position: absolute;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        top: -40upx;

        .history_wrap {
          background-color: #fff;
          display: flex;

          .navigator {
            flex: 1;
            text-align: center;
            padding: 10upx 0;

            .his_num {
              color: #eb4450;
            }

            .his_name {}
          }
        }

        .orders_wrap {
          background-color: #fff;
          margin-top: 30upx;

          .orders_title {
            padding: 20upx;
            border-bottom: 1upx solid #ccc;
          }

          .order_content {
            display: flex;

            navigator {
              padding: 15upx 0;
              flex: 1;
              text-align: center;

              .iconfont {
                color: #eb4450;
                font-size: 40upx;
              }

              .order_name {}
            }
          }
        }

        .address_wrap {
          margin-top: 30upx;
          background-color: #fff;
          padding: 20upx;
        }

        .app_info_wrap {
          margin-top: 30upx;
          background-color: #fff;

          .app_info_item {
            padding: 20upx;
            border-bottom: 1upx solid #ccc;
          }

          .app_info_contact {
            display: flex;
            justify-content: space-between;
          }
        }

        .recommend_wrap {
          margin-top: 30upx;
          background-color: #fff;
          padding: 20upx;
        }
      }
    }
  }
</style>
